<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科研项目管理系统 - 统计报表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            padding-top: 20px;
        }
        .card {
            margin-bottom: 20px;
        }
        .chart-container {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h1 class="h3">科研项目管理系统</h1>
        </div>
        <div class="card-body">
            <nav class="nav mb-4">
                <a class="nav-link" href="/project/list">项目管理</a>
                <a class="nav-link active" href="/stat/report">统计报表</a>
                <a class="nav-link" href="/college/list">学院管理</a>
            </nav>

            <div class="card">
                <div class="card-header">项目统计图表</div>
                <div class="card-body">
                    <div class="chart-container">
                        <h4>各学院项目数量分布</h4>
                        <div id="collegeChart" style="width:600px;height:400px;"></div>
                    </div>

                    <div class="chart-container">
                        <h4>项目状态分布</h4>
                        <div id="statusChart" style="width:600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    // 页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 学院分布柱状图
        console.log('开始获取学院统计数据...');
        const collegeUrl = /*[[@{/stat/api/stats/college}]]*/;
        console.log('请求URL:', collegeUrl);
        fetch(collegeUrl)
            .then(r => {
                console.log('响应状态:', r.status);
                return r.json();
            })
            .then(data => {
                console.log('学院统计数据:', data);
                if (!data || data.length === 0) {
                    console.warn('学院统计数据为空');
                    document.getElementById('collegeChart').innerHTML = '暂无数据';
                    return;
                }
                const chart = echarts.init(document.getElementById('collegeChart'));
                chart.setOption({
                    title: { text: '各学院项目数量' },
                    tooltip: { trigger: 'axis' },
                    xAxis: { 
                        type: 'category', 
                        data: data.map(d => d.collegeName),
                        axisLabel: { 
                            rotate: 45,
                            interval: 0
                        }
                    },
                    yAxis: { type: 'value' },
                    series: [{ 
                        type: 'bar', 
                        data: data.map(d => d.count),
                        itemStyle: {
                            color: '#5470c6'
                        }
                    }]
                });
                // 添加响应式处理
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            })
            .catch(error => {
                console.error('获取学院统计数据失败:', error);
                document.getElementById('collegeChart').innerHTML = '加载数据失败，请稍后重试';
            });
        
        // 状态分布饼图
        console.log('开始获取状态统计数据...');
        const statusUrl = /*[[@{/stat/api/stats/status}]]*/;
        console.log('请求URL:', statusUrl);
        fetch(statusUrl)
            .then(r => {
                console.log('响应状态:', r.status);
                return r.json();
            })
            .then(data => {
                console.log('状态统计数据:', data);
                if (!data || data.length === 0) {
                    console.warn('状态统计数据为空');
                    document.getElementById('statusChart').innerHTML = '暂无数据';
                    return;
                }
                const chart = echarts.init(document.getElementById('statusChart'));
                chart.setOption({
                    title: { text: '项目状态分布' },
                    tooltip: { trigger: 'item' },
                    series: [{
                        type: 'pie',
                        radius: '50%',
                        data: data.map(d => ({ name: d.statusName, value: d.count })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });
                // 添加响应式处理
                window.addEventListener('resize', function() {
                    chart.resize();
                });
            })
            .catch(error => {
                console.error('获取状态统计数据失败:', error);
                document.getElementById('statusChart').innerHTML = '加载数据失败，请稍后重试';
            });
    });
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>